<template>
    <div
        style="text-align: left; padding: 12px 12px 15px; border-bottom: 1px solid var(--el-color-danger-light-7); margin-bottom: 20px;">
        <el-button type="primary" :icon="Plus">新增</el-button>
        <el-button type="primary" :icon="Edit">编辑</el-button>
        <!-- <el-button type="primary" :icon="Edit">关联</el-button> -->
        <el-button type="primary" :icon="Link">测试连接</el-button>
        <el-button type="danger" :icon="Delete">删除</el-button>
        <!-- <img :src="captcha"/> -->
    </div>
    <el-table :data="tableData" highlight-current-row style="width: 100%">
        <el-table-column type="selection" width="50" />
        <el-table-column fixed label="系统IP" width="180">
            <template #default="scope">
                <div style="display: flex; align-items: center">
                    <span style="margin-right: 10px">{{ scope.row.ip }}</span>
                    <el-tag v-if="scope.row.ip == scope.row.localip" type="warning">本机</el-tag>
                </div>
            </template>
        </el-table-column>
        <el-table-column prop="username" label="用户名" width="120" />
        <el-table-column prop="port" label="SSH端口" width="120" />
        <el-table-column prop="size" label="设备规格" width="120" />
        <!-- <el-table-column prop="ipv6" label="系统IPv6" width="240" /> -->
        <el-table-column prop="os" label="操作系统" width="360" />
        <el-table-column fixed="right" label="操作" min-width="160">
            <template #default="scope">
                <el-button link type="primary" v-if="scope.row.ip !== scope.row.localip" size="small"
                    @click="handleClick">
                    测试连接
                </el-button>
                <el-button link type="primary" size="small" @click="handleClick">
                    编辑
                </el-button>
            </template>
        </el-table-column>
    </el-table>
</template>

<script lang="ts" setup>
import { reactive, ref, onMounted } from 'vue'
import { Plus, Delete, Link, Key, Edit } from '@element-plus/icons-vue'
import axios from 'axios'
import JSEncrypt from 'jsencrypt'

const handleClick = () => {
    console.log('click')
}

// interface Host {
//     ip: string
//     localip: string
//     ipv6: string
//     size: string
//     os: string
//     username: string
//     port: string
// }



const tableData = ref([]);
onMounted(() => {

    let ins = axios.create({
        headers: {
            'Content-Type': 'application/json',
            'Authorization': sessionStorage.getItem("access_token")
        }
    });
    ins.get("/host/list").then((rsp) => {
        console.info(rsp.data['data'])
        tableData.value = rsp.data['data'];
    }).catch(error => {
        console.error(error);
    });

    let ins2 = axios.create({
        headers: {
            'Content-Type': 'application/json',
            'RefreshToken': sessionStorage.getItem("refresh_token")
        }
    });
    ins2.post("/auth/refresh_token").then((rsp) => {
        console.info(rsp.data['data'])
        tableData.value = rsp.data['data'];
    }).catch(error => {
        console.error(error);
    });

});




// const tableData: Host[] = [
//     {
//         ip: '192.168.30.11',
//         localip: '192.168.30.11',
//         ipv6: '240e:3bb:64f:1210:b4c2:f25e:3308:da28/64',
//         size: "8c16g",
//         os: 'Kylin Linux Advanced Server release V10 (SP3) /(Lance)-x86_64-Build23/20230324',
//         username: 'dataxone',
//         port: "65534",
//     }, {
//         ip: '192.168.30.12',
//         localip: '192.168.30.11',
//         ipv6: 'fe80::c02c:5d2c:c5e0:7ab5/64',
//         size: "8c16g",
//         os: 'Kylin Linux Advanced Server release V10 (SP3) /(Lance)-x86_64-Build23/20230324',
//         username: 'dataxone',
//         port: "22",
//     },
// ];
// const encryptor = new JSEncrypt();
// let key = sessionStorage.getItem("key");
// if (key) {
//     encryptor.setPublicKey(key);
// }

// let data = {
//     ip: "192.168.30.11",
//     username: "dataxone",
//     password: encryptor.encrypt("Dsg_2021")
// };

// ins.post("/host/add", data).then((rsp) => {
//     console.info(rsp.data)
// }).catch(error => {
//     console.error(error);
// });

// const selectable = (row: Host) => !(row.localip == row.ip)
</script>
